<template>
  <z-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <z-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </z-auto-complete>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const options = ref([])
    const onSelect = value => {
      console.log('onSelect', value)
    }
    const handleSearch = value => {
      options.value = !value ? [] : [{
        value
      }, {
        value: value + value
      }, {
        value: value + value + value
      }]
    }
    const handleKeyPress = ev => {
      console.log('handleKeyPress', ev)
    }
    return {
      value,
      options,
      onSelect,
      handleSearch,
      handleKeyPress
    }
  }
})
</script>
